<template>
  <div class="index-left-page" background="#38424D" text-color="#747b82" :default-active="showMenu">
    <el-menu
      class="indexLeft-page"
      background-color="#38424D"
      text-color="#747B82"
      @select="select"
      :default-active="showMenu"
    >
      <template v-for="item in menus" v-if="item.type==1">
        <template v-if="item.subMenus">
          <el-submenu :index="item.id.toString()">
            <template slot="title">
              <i :class="item.icon"></i>
              <span :id="item.id">{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(subItem,i) in item.subMenus"
              v-if="subItem.type==1"
              :key="i"
              :index="subItem.url"
              :id="subItem.id"
            >{{ subItem.name }}</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.id.toString()">
            <i :class="item.icon"></i>
            <span :id="item.id">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: ["showMenu"],
  data() {
    return {
      menus: [],
    };
  },
  methods: {
    select(e) {
      let that = this;
      that.$router.push({ path: e });
    }
  },
  created() {
    let that = this;
    let menuList = that.localData("get", "login_user")
      .customerUserResourceVOList;
    menuList.map(function(item) {
      let subMenus = [];
      item.list.forEach(function(itemChild, index) {
        subMenus.push({
          id: itemChild.resourceId,
          name: itemChild.resourceName,
          type: 1,
          url: itemChild.url,
          icon: "",
          sort: 1,
          parentId: null,
          subMenus: []
        });
      });
      that.menus.push({
        id: item.resourceId,
        name: item.resourceName,
        type: 1,
        url: item.url,
        icon: "",
        sort: 1,
        parentId: null,
        subMenus: subMenus
      });
    });
  }
};
</script>
<style lang="less">
.index-left-page {
  width: 100%;
  height: 100%;
  background: #38424d;
  color: #fff;
  a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
  }
}
</style>
